<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>河北电信智慧运营</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=4">
    <meta http-equiv="X-UA-Compatible" content="IE=7.5">
    <meta http-equiv="X-UA-Compatible" content="IE=100">
    <meta http-equiv="X-UA-Compatible" content="IE=a">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <!-- 引入 baidu地图api -->
    <link href="<%=path%>/static/st1/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iGGNz4cPQPLaOqcYLTwrPa0VavTTeqjy"></script>
    <!-- 引入 baidu地图热力图api -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="<%=path%>/static/st1/js/jquery-3.2.1.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="<%=path%>/static/st1/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="<%=path%>/static/st1/js/echarts.min.js"></script>
    <script src="<%=path%>/static/st1/js/layout.border.js"></script>
    <style type="text/css">
        html,
        body {
            font-family: “Microsoft YaHei” 
            ! important;
            margin: 0px;
            padding: 2px;
            box-sizing: border-box;
            overflow-x:hidden;
            overflow-y:hidden
            position: absolute;
            min-width: 1024px;
            width: 100%;
            height: 100%;
            min-height: 768px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            background-color: black;
            background-image: url(<%=path%>/static/st1/image/back.jpg);
            background-size: cover;
            color: white;
            min-height: inherit;
        }



        .card {
            height: 33%;
            border: 1px solid darkslategray;
        }

        .shuzi {
            margin: 5px;
            padding: 0px;
            height:50px;
            font-size: 40px;
            border-radius: 10px;
            line-height: 55px;
            background-color: rgba(211, 255, 255, 0.5);
        }
        /*
        .line {
            position: absolute;
            width: 100%;
            height: 2px;
            opacity: 0.4;
            top: 38px;
        }
        */

        .mid1 {
            width: 100%;
            height: 20%;
            border: 1px solid darkslategray;
        }

        .mid2 {
            width: 100%;
            height: 79%;
            border: 1px solid darkslategray;
        }

        .mid11 {
            padding-top: 10px;
        }

        .pright {
            padding-right: 2px;
        }

        .pleft {
            padding-left: 2px;
        }

        .zhexiantu {
            height: 85%;
        }

        .lie {
            height: 100%;
            margin: -5px;
        }

        .imptitle {
            height: 15%;
        }

        .imptitle1 {}

        .title {
            color:aliceblue;
            font-size: 48px;
            line-height: 100px;
        }

        #change {
            border: 1px solid black;
            background-color: darkslategray;
            opacity: 0.5;
        }

    </style>
</head>

<body class="layout">
    <header data-options="region:'north', height: '100'">
        <div class="row header layout">
            <div class="col-xs-3" style="line-height: 100px;text-align: left">
                 <img class="logo" src="<%=path%>/static/st1/image/alogo1.png" alt="" height="60" width="280">
            </div>
            <div class="col-xs-6 ">
                <div class="title">
                    河北电信智慧运营
                </div>
            </div>
            <div class="col-xs-3" style="line-height: 50px;">

                <span class="col-xs-4" style="text-align: right;">
                    <strong>时间：</strong>
                </span>
                <span class="col-xs-8" style="padding:0px;margin:0px;" id="show">
                    &nbsp;
                </span>
                <span class="col-xs-4" style="text-align: right;">
                 <strong>区域：</strong>
                </span>
                <span class="col-xs-8" style="">
            
            <select onchange="ajaxS(this.value)" id="change"
                    >
                <option value="">全部</option>          
                <option value="天鹅湖">天鹅湖</option>           
                <option value="南湖公园">南湖公园</option>        
             </select>
        </span>
            </div>
        </div>
    </header>
    <div class="content" data-options="region:'center'">
        <div class="col-xs-4 lie">
            <div class="card col-xs-12">
                <div class="imptite">
                    4G用户数/流量数
                </div>
                <div id="left1" class="zhexiantu"></div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    基站运行情况
                </div>
                <div id="left2_2" class="zhexiantu"></div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    TOP流量小区
                </div>
                <div id="left2_1" class="zhexiantu"></div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    4G业务类型流量
                </div>
                <div id="left3_1" class="zhexiantu"></div>
            </div>
            <div class="card col-xs-6" style="border-left: 5px;">
                <div class="imptitle">
                    4G业务类型数量
                </div>
                <div id="left3_2" class="zhexiantu"></div>
            </div>
        </div>
        <div class="col-xs-4 lie">
            <div class="mid1">
                <div class="col-xs-6 mid11 pright">
                    <div class="imptitle1">
                        用户数
                    </div>
                    <div class="shuzi">
                        <span id="my1"></span>
                    </div>
                </div>
                <div class="col-xs-6 mid11 pleft">
                    <div class="imptitle1">
                        流量(MB)
                    </div>
                    <div class="shuzi">
                        <span id="my2"></span>
                    </div>
                </div>
            </div>
            <div class="mid2">
                <iframe id="J_iframe" class="J_iframe" name="iframe0" width="100%" height="100%" frameborder="0" seamless>
                </iframe>
            </div>
        </div>
        <div class="col-xs-4 lie">
            <div class="card col-xs-6">
                <div class="imptitle">
                    游戏交互时延优良率
                </div>
                <div id="right1_1" class="zhexiantu">
                </div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    即时通信消息发送成功率
                </div>
                <div id="right1_2" class="zhexiantu">
                </div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    视频卡顿频率
                </div>
                <div id="right2_1" class="zhexiantu">
                </div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    视频下载优良率
                </div>
                <div id="right2_2" class="zhexiantu">
                </div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    网页首屏优良率
                </div>
                <div id="right3_1" class="zhexiantu">
                </div>
            </div>
            <div class="card col-xs-6">
                <div class="imptitle">
                    网页打开优良率
                </div>
                <div id="right3_2" class="zhexiantu">
                </div>
            </div>
        </div>
    </div>
    <footer data-options="region:'south', height: '60'">
        <div style="margin-top:10px;">
            <small>
                中国电信股份有限公司河北分公司
            </small>
        </div>
    </footer>



    <script>
        var e = "showMiddle";
        var shaixuan = ''; //筛选
        function aaa(a) {
            e = a;
            //alert(e);
        }
        $(function() {
            //在这添加方法
            getweek();
            getList();
            var show = document.getElementById("show");
            setInterval(function() {
                var time = new Date();
                // 程序计时的月从0开始取值后+1
                var m = time.getMonth() + 1;
                var t = time.getFullYear() + "-" + m + "-" +
                    time.getDate() + " " + time.getHours() + ":";
                if (time.getSeconds() < 10) {
                    t += time.getMinutes() + ":" + '0' + time.getSeconds();
                } else {
                    t += time.getMinutes() + ":" + time.getSeconds();
                }
                show.innerHTML = t;
                if (time.getMinutes() % 15 === 0 && time.getSeconds() === 5) {
                    //alert(1);
                    getList();
                    getweek();
                }
                //console.log(time.getMinutes() % 15 + "<->" + time.getSeconds())
            }, 1000);

        });
        //获得页面4G人数和流量数据并填页面

        function ajaxS(v) {
            shaixuan = v;
            getList();
            getweek();
        }

        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
                " " + date.getHours() + seperator2 + date.getMinutes() +
                seperator2 + date.getSeconds();
            return currentdate;
        }

        function getList() {
            $.post("<%=path%>/list", {
                suggest: shaixuan
            }, function(data) {
                if (data != null) {
                    $("#my1").html(data[0][0].sumUsers);
                    $("#my2").html(data[0][0].protocolFlow);

                } else {
                    alert("请求失败或暂无数据")
                }
            })
        }
        //获得周数据总数和平均值、

        function getweek() {
            $.post("<%=path%>/findweek", {
                suggest: shaixuan
            }, function(data) {
                if (data != null) {
                    week = data;
                    load(week)
                } else {
                    alert("请求失败或暂无数据")
                }
            })
        }

        function load(week) {
            //option1的日期数据
            var weekday = []; //时间
            var Op1Num = []; //4g总人数
            var Op1liu = []; //4g流量总数
            var Op12dakai = []; //网页打开优良率
            var Op12shoupingi = []; //网页首屏优良率
            var Op12xiazai = []; //视频下载优良率
            var Op12kadun = []; //视频卡顿频率优良率
            var Op12tongxun = []; //即时通信消息发送成功率
            var Op12youxi = []; //游戏交互时延优良率

            for (var i = 0; i < week.length; i++) {
                weekday[i] = week[i].time.substring(10, 16);
                Op1Num[i] = week[i].sumUsers;
                Op1liu[i] = week[i].protocolFlow;
                Op12dakai[i] = toDecimal(week[i].pageOpenRate);
                Op12shoupingi[i] = toDecimal(week[i].pageRate);
                Op12xiazai[i] = toDecimal(week[i].vedioDownRate);
                Op12kadun[i] = toDecimal(week[i].vedioStopRate);
                Op12tongxun[i] = toDecimal(week[i].messageRate);
                Op12youxi[i] = toDecimal(week[i].gameRate);
            }
            var cakeliu = []; //饼图数据流量
            var cakerenshu = []; //饼图数据人数

            function toDecimal(x) {
                var f = parseFloat(x);
                if (isNaN(f)) {
                    return;
                }
                f = Math.round(x * 100) / 100;
                return f;
            }

            $.ajax({
                url: "<%=path%>/findcake?suggest=" + shaixuan,
                cache: false,
                async: false,
                success: function(data) {
                    //流量饼图处理数据
                    for (var y = 0; data.length; y++) {
                        var ob1 = {};
                        ob1['value'] = data[y].num;
                        ob1['name'] = data[y].protocolType;
                        cakeliu[y] = ob1;
                        var ob2 = {};
                        ob2['value'] = data[y].flow;
                        ob2['name'] = data[y].protocolType;
                        cakerenshu[y] = ob2;
                    }
                }
            });

            var zhu = [];
            var name1 = [];
            $.ajax({
                url: "<%=path%>/findzhu?suggest=" + shaixuan,
                cache: false,
                async: false,
                success: function(data) {


                    for (var i = 0; i < data[0].length; i++) {
                        zhu.push(data[0][i].flow);
                    }
                    for (var m = 0; m < data[1].length; m++) {
                        name1.push(data[1][m])
                    }
                }
            });

            var cake = [];
            $.ajax({
                url: "<%=path%>/cakebill?suggest=" + shaixuan,
                cache: false,
                async: false,
                success: function(data) {
                    var obj1 = new Object();
                    obj1['value'] = data[1]
                    obj1['name'] = "出现故障";
                    cake.push(obj1)
                    var obj2 = new Object();
                    obj2['value'] = data[0]
                    obj2['name'] = "未出现故障";
                    cake.push(obj2)
                }
            });

            var left1 = echarts.init(document.getElementById('left1'));
            var left1_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                legend: {
                    data: ['4G用户数', '4G流量'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                        type: 'value',
                        name: '4G用户数',
                        position: 'left',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        min: 0,
                        max: 500000,
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1 //这里是为了突出显示加上的，可以去掉
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '4G流量',
                        min: 0,
                        max: 500000,
                        position: 'right',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                                //                        width:1//这里是为了突出显示加上的，可以去掉
                            }
                        }
                    }
                ],
                series: [{
                        name: '4G用户数',
                        type: 'line',
                        data: Op1Num,
                        markPoint: {
                            data: [{
                                    type: 'max',
                                    name: '最大值'
                                },
                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ],
                        },
                        /*markLine: {
                         data: [
                         {type: 'average', name: '平均值'}
                         ]
                         },*/
                    },
                    {
                        name: '4G流量',
                        type: 'line',
                        data: Op1liu,
                        markPoint: {
                            data: [{
                                    type: 'max',
                                    name: '最大值'
                                },
                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ],
                        },
                        /*markLine: {
                         data: [
                         {type: 'average', name: '平均值'}
                         ]
                         },*/
                    }
                ]
            };
            left1.setOption(left1_option);
            /*end*/

            var left2_1 = echarts.init(document.getElementById('left2_1'));
            var left2_1_option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '8%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 1 // 让字体变大
                        }
                    },
                    //data: ['one', 'two', 'thr', 'fou', 'fiv', 'six', 'sev'],//name1
                    data: name1,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            //                        width:1//这里是为了突出显示加上的，可以去掉
                        }
                    }

                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 1 // 让字体变大
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            //                        width:1//这里是为了突出显示加上的，可以去掉
                        }
                    },
                    min: 0,
                    max: 1000,
                }],
                series: [{
                    name: '流量总和',
                    type: 'bar',
                    barWidth: '60%',
                    data: zhu,
                    //设置柱体颜色
                    itemStyle: {
                        normal: {
                            color: '#89f6ca'
                        }
                    }
                }]
            };
            //console.log('zhu')
            //console.log(name1)
            //console.log(zhu)
            left2_1.setOption(left2_1_option);
            /*end*/


            var left2_2 = echarts.init(document.getElementById('left2_2'));
            var left2_2_option = option = {
                /*title: {
                 text: 'TOP流量小区',
                 x: 'center',
                 textStyle: {
                 color: '#fff',
                 fontSize: 12 // 让字体变大
                 }
                 },*/
                color: ["#D55B80", "#6EB0EA"],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                grid: {
                    left: '8%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    //data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                calculable: true,
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: [20, 80],
                    //center : ['25%', 200],
                    //roseType: 'radius',
                    //width: '40%',       // for funnel
                    //max: 40,            // for funnel
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    },
                    data: cake
                }]
            };
            left2_2.setOption(left2_2_option);
            /*end*/
            var left3_1 = echarts.init(document.getElementById('left3_1'));
            var left3_1_option = option = {
                /*title: {
                 text: '4G业务类型流量占比',
                 x: 'center',
                 textStyle: {
                 color: '#fff',
                 fontSize: 12 // 让字体变大
                 }
                 },*/
                color: ["#9DB35F", "#61C4C7", "#B2A4D6", "#6EB0EA", "#E2CE47", "#EE896B"],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    //data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                calculable: true,
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: [20, 80],
                    //center : ['25%', 200],
                    roseType: 'radius',
                    width: '40%', // for funnel
                    max: 40, // for funnel
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    },
                    //data:cakeliu
                    data: cakeliu
                }]
            };
            left3_1.setOption(left3_1_option);
            /*end*/

            var left3_2 = echarts.init(document.getElementById('left3_2'));
            var left3_2_option = option = {
                /*title: {
                 text: '4G业务类型数量占比',
                 x: 'center',
                 textStyle: {
                 color: '#fff',
                 fontSize: 12 // 让字体变大
                 }
                 },*/
                color: ["#E1757D", "#E2CE47", "#EE896B", "#B6D5DC", "#408FCA", "#51B0D4"],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    //data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                calculable: true,
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: [20, 80],
                    //center : [90,90],
                    roseType: 'radius',
                    //width: '10%',       // for funnel
                    max: 40, // for funnel
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    },
                    //data:cakerenshu
                    data: cakerenshu
                }]
            };
            left3_2.setOption(left3_2_option);
            /*end*/


            var right1_1 = echarts.init(document.getElementById('right1_1'));
            var right1_1_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                /*legend: {
                 data: ['游戏交互时延优良率'],
                 textStyle: {
                 color: '#fff'
                 }
                 },*/
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    //data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '',
                    position: 'left',
                    min: 80,
                    max: 100,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                }],
                series: [{
                    name: '游戏交互时延优良率',
                    type: 'line',
                    data: Op12youxi,
                    //data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    /*markLine: {
                     data: [
                     {type: 'average', name: '平均值'}
                     ]
                     },*/
                }]
            };
            right1_1.setOption(right1_1_option);
            /*end*/

            var right1_2 = echarts.init(document.getElementById('right1_2'));
            var right1_2_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                /*color: ['#ff7043', '#4fc3f7'],
                 legend: {
                 data: ['即时通信消息发送成功率'],
                 textStyle: {
                 color: '#fff'
                 }
                 },*/
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    //data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '',
                    position: 'left',
                    min: 80,
                    max: 100,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                }],
                series: [{
                    name: '即时通信消息发送成功率',
                    type: 'line',
                    data: Op12tongxun,
                    //data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    /*markLine: {
                     data: [
                     {type: 'average', name: '平均值'}
                     ]
                     },*/
                }]
            };
            right1_2.setOption(right1_2_option);
            /*end*/

            var right2_1 = echarts.init(document.getElementById('right2_1'));
            var right2_1_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                /*legend: {
                 data: ['视频卡顿频率优良率'],
                 textStyle: {
                 color: '#fff'
                 }
                 },*/
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    //data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '',
                    position: 'left',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    min: 80,
                    max: 100,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                }],
                series: [{
                    name: '视频卡顿频率优良率',
                    type: 'line',
                    data: Op12kadun,
                    //data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    /*markLine: {
                     data: [
                     {type: 'average', name: '平均值'}
                     ]
                     },*/
                }]
            };
            right2_1.setOption(right2_1_option);
            /*end*/

            var right2_2 = echarts.init(document.getElementById('right2_2'));
            var right2_2_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                /*legend: {
                 data: ['视频下载优良率'],
                 textStyle: {
                 color: '#fff'
                 }
                 },*/
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    //data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '',
                    position: 'left',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    min: 80,
                    max: 100,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                }],
                series: [{
                    name: '视频下载优良率',
                    type: 'line',
                    data: Op12xiazai,
                    //data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    /*markLine: {
                     data: [
                     {type: 'average', name: '平均值'}
                     ]
                     },*/
                }]
            };
            right2_2.setOption(right2_2_option);
            /*end*/

            var right3_1 = echarts.init(document.getElementById('right3_1'));
            var right3_1_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                /*legend: {
                 data: ['网页首屏优良率'],
                 textStyle: {
                 color: '#fff'
                 }
                 },*/
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    //data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '',
                    position: 'left',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    min: 80,
                    max: 100,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                }],
                series: [{
                    name: '网页首屏优良率',
                    type: 'line',
                    data: Op12shoupingi,
                    //data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    /*markLine: {
                     data: [
                     {type: 'average', name: '平均值'}
                     ]
                     },*/
                }]
            };
            right3_1.setOption(right3_1_option);
            /*end*/

            var right3_2 = echarts.init(document.getElementById('right3_2'));
            var right3_2_option = {
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#ff7043', '#4fc3f7'],
                /*legend: {
                 data: ['网页打开优良率'],
                 textStyle: {
                 color: '#fff'
                 }
                 },*/
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: weekday,
                    //data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '',
                    position: 'left',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    min: 80,
                    max: 100,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1 //这里是为了突出显示加上的，可以去掉
                        }
                    }
                }],
                series: [{
                    name: '网页打开优良率',
                    type: 'line',
                    data: Op12dakai,
                    //data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    /*markLine: {
                     data: [
                     {type: 'average', name: '平均值'}
                     ]
                     },*/
                }]
            };
            right3_2.setOption(right3_2_option);
            /*end*/

            window.onresize = left1.resize;
            window.onresize = left2_1.resize;
            window.onresize = left2_2.resize;
            window.onresize = left3_1.resize;
            window.onresize = left3_2.resize;

            window.onresize = right1_1.resize;
            window.onresize = right1_2.resize;
            window.onresize = right2_1.resize;
            window.onresize = right2_2.resize;
            window.onresize = right3_1.resize;
            window.onresize = right3_2.resize;

            document.getElementById('J_iframe').src = "<%=path%>/" + e + '?suggest=' + shaixuan;

        }

    </script>

</body>

</html>
